<template>
  <div class="custom-menu-container">
    <el-menu default-active="2" class="el-menu-vertical" @open="handleOpen" @close="handleClose" @select="handleSelect"
      router>

      <el-menu-item index="" class="luxry" disabled>
        <img src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192100269.png" alt="">
        <span>我的待办</span>
      </el-menu-item>

      <el-sub-menu index="2" class="luxry">
        <template #title>
          <img src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728200216250.png" alt="">
          <span>项目管理</span>
        </template>

        <el-menu-item-group>
          <el-menu-item index="2-1">项目台账</el-menu-item>
          <el-menu-item index="2-2" disabled>档案库</el-menu-item>
          <el-menu-item index="2-3" disabled>模板附件</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="3" class="luxry">
        <template #title>
          <img src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192127318.png" alt="">
          <span>报表分析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1" disabled>基础面板</el-menu-item>
          <el-menu-item index="3-2" disabled>负债率</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="4" class="luxry">
        <template #title>
          <img src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192132377.png" alt="">
          <span>系统管理</span>
        </template>

        <el-menu-item-group>
          <el-menu-item index="4-1" disabled>用户管理</el-menu-item>
          <el-menu-item index="4-2" disabled>系统设置</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup name="MenuItem">
import { defineProps } from 'vue';
const props = defineProps<{
  hideShadow: boolean;
}>();
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('open', key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log('close', key, keyPath)
}
const handleSelect = (index: string) => {
  console.log('select', index)
}
</script>

<style scoped>
:deep(.el-menu-item-group__title) {
  height: 0;
  padding: 0;
}

:deep(.el-sub-menu__title) {
  height: 67px;
}

div.el-sub-menu__title {
  height: 67px !important;
  line-height: 67px !important;
}

span {
  display: inline-block;
  margin-top: 3px;
  font-size: 18px;
  color: #797979;
}

.el-menu-item {
  height: 67px;
  font-size: 18px;
  color: #797979;
}

.el-menu-item-group .el-menu-item {
  display: flex;
  justify-content: center;
  padding-left: 0 !important;
}

li.el-menu-item {
  height: 67px;
  margin-top: 3px;
}

.luxry img {
  margin: 30px 22px 28px;
  width: 21px;
  height: 24px;
}

.custom-menu-container {
  width: 260px;
  height: 100vh;
  background-color: #FFFFFF;
}

.el-menu-vertical {
  width: 100%;
  height: 100%;
  border-right: none;
}

a {
  text-decoration: none !important;
}

.turn span,
.el-menu-item.is-active {
  color: #1A70AD !important;
}

:deep(.el-menu-item.is-active:not(.el-sub-menu .el-menu-item)) {
  box-shadow: inset 8px 0 0 0 #006DB8;
  border-radius: 0 10px 10px 0;
  background-color: rgba(0, 109, 184, 0.05);
}

:deep(.el-menu-item.is-active:not(.el-sub-menu .el-menu-item)) {
  box-shadow: v-bind('props.hideShadow ? "none" : "inset 8px 0 0 0 #006DB8"');
  border-radius: 0 10px 10px 0;
  background-color: rgba(0, 109, 184, 0.05);
}

:deep(.el-sub-menu.has-active-child > .el-sub-menu__title) {
  box-shadow: none !important;
}
</style>